<template>
  <div style="background-color: white">
      <div id="china"></div>
  </div>
</template>
<script>
import axios from 'axios'
import echarts from "echarts"
import XLSX from 'xlsx'
import "echarts/map/js/china.js"
import transformSheets from '../scripts/read_xlsx.js'

export default {
  name: "map",
  data() {
    return {
      data_confirm:[],
      all_data:[]
    };
  },
  methods: {
    buildMap() {
      let myChart = echarts.init(document.getElementById("china"));
      let option = {
        title:{
          text:"中国疫情分布"
        },
        tooltip: {
          formatter: function (params, ticket, callback) {
            // console.log(params)
            return (
              params.name + "<br />" +"累计确诊人数：" + params.value+
              "<br />" +"累计治愈人数："+params.data.heal+"<br />"+"累计死亡人数："+params.data.dead
            );
          }, //数据格式化
        },
        visualMap: {
          min: 1,
          max: 5000,
          left: "left",
          top: "bottom",
          text: ["高", "低"], //取值范围的文字
          inRange: {
            color: ["#bcc5ee", "#1f307b"], //取值范围的颜色
          },
          show: true, //图注
        },
        geo: {
          map: "china",
          roam: false, //不开启缩放和平移
          zoom: 1.23, //视角缩放比例
          label: {
            normal: {
              show: true,
              fontSize: "10", //注意：地图省份名字字体如果过大会导致字体重叠
              color: "rgba(0,0,0,0.7)",
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)",
            },
            emphasis: {
              areaColor: "#f2d5ad", //鼠标选择区域颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            name: "疫情数据",
            type: "map",
            geoIndex: 0,
            data: this.all_data,
          },
        ],
      };
      myChart.setOption(option);
    },
    getData(){
      axios.get('../../static/data/china_data.csv',{responseType:'arraybuffer'})
      .then(res => {
        var data = new Uint8Array(res.data) 
        var wb = XLSX.read(data,{type:"array"})
        var sheet1 = wb.Sheets
        var content = transformSheets(sheet1)
        delete content[0]
        console.log(wb)
        for(var i=1;i<content.length;i++)
        {
            var confirm = new Object()
            var element = content[i] 
            confirm.name = content[i][0]
            confirm.value = content[i][1]
            this.data_confirm[i-1]=confirm
            confirm.heal = content[i][2]
            confirm.dead = content[i][3]
            this.all_data[i-1]=confirm
            // console.log(element[0])
        }
        this.buildMap()
        console.log(this.data_confirm)
      }).catch(err =>{
        console.log(err)
      })
    }
  },
  mounted() {
    this.getData()
    
  }
};
</script>
 
<style scoped>
* {
  margin: 0;
  padding: 0;
}
#china {
  width: 600px;
  height: 450px;
  margin: 150px auto;
  border: none;
  background-color: #ffffff;
}
</style>